<template>
  <el-dialog v-model="dialogFormVisible" :title="title" width="500" destroy-on-close draggable @closed="handlerClosed">
    <div class="cells">
      <el-tag class="cell" v-for="item in userDataList" :key="item.id" effect="plain" size="large" type="info">{{ item.nickName }}</el-tag>
    </div>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { useUsersStore } from '../../stores'

const dialogFormVisible = ref(false)
const title = ref('')
const userDataList = ref<any[]>([])

/**
 * 当处理器关闭时调用的函数
 */
const handlerClosed = () => {
  userDataList.value = []
  title.value = ''
}

/**
 * 根据部门ID过滤用户列表
 *
 * @param val 部门ID
 */
const open = (val: number, dailogTitle: string) => {
  title.value = dailogTitle
  dialogFormVisible.value = true
  userDataList.value = useUsersStore().userAllList.filter((e: any) => e.deptId == val)
}

defineExpose({ open })
</script>
<style lang="scss" scoped>
.cells {
  display: flex;
  flex-wrap: wrap;
  
  .cell {
    margin: 5px;
  }
}
</style>
